<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css" />
	</head>
	<body>
		<!--
        	作者：刘开新
        	时间：2018-10-08
        	描述：
        -->
		<div>
			全选<input type="checkbox" class="parentBox"/>
			反选<input type="checkbox" class="fanxuanBox"/>
			<div class="children">
				<input type="checkbox">1
				<input type="checkbox">2
				<input type="checkbox">3
				<input type="checkbox">4
				<input type="checkbox">5
				<input type="checkbox">6
			</div>
		</div>
			
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript">
			$(".parentBox").click(function(){
				if($(this).is(":checked")){
					$(".children input[type='checkbox']").prop("checked",true);
				}else{
					$(".children input[type='checkbox']").prop("checked",false);
				}
			});
			
			
			$(".fanxuanBox").click(function(){
				$(".children input[type='checkbox']").each(function(){
					if($(this).is(":checked")){
						$(this).prop("checked",false);
					}else{
						$(this).prop("checked",true);
					}
				});	
			});

		</script>
		
	</body>
</html>